<template>
  <div class="Order">
    <Head msg="我的预约"></Head>
    <div class="scroll-body">
      <cube-scroll
        ref="scroll"
        :data="list"
        :options="options"
        @pulling-up="events"
      >
        <div
          class="appointment-list"
          v-for="(item,index ) in list"
          :key="index"
          @click="toconsult(item.id)"
        >
          <div class="list-head">
            <div class="head-left">
              <img :src="item.goods_thumb" />
            </div>
            <div class="head-right">
              <div class="head-title1">{{ item.goods_name }}</div>
              <!--          <div class='head-title2 nowrap'>{{item.goods_remark}}</div>-->
              <div
                class="head-title3 nowrap"
                @click.stop="toRespect(item.dealer_id)"
              >
                经销商：{{ item.shop_name }}
                <span style="color: #ff6347"
                  >({{ item.shop_rep_info.rep_point }}分)</span
                >
              </div>
            </div>
          </div>
          <div v-if="item.sale_phone" class="list-bottom">
            <div class="bottom-left">
              <!--          <div class='left-pic'>-->
              <!--            <img :src='item.avatar' />-->
              <!--          </div>-->
              <div class="left-content">
                <div>{{ item.sale_name }}</div>
                <div>金牌购车顾问</div>
              </div>
            </div>
            <a
              class="bottom-right"
              @click.stop=""
              :href="'tel:' + item.sale_phone"
            >
              联系顾问
            </a>
          </div>
          <div class="list-bottom-load" v-else>
            {{ title }}
          </div>
        </div>
        <Notice msg="暂无数据" :notice="list.length"></Notice>
      </cube-scroll>
      <div
        style="background: white;text-align:left;color: red;font-size: 12px;line-height: 18px;padding: 10px"
      >
        信誉值满分为100分，若经销商的信誉值低于80分，说明此经销商被举报次数过多，为了避免上当，购车时请谨慎！
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
import Head from '@/components/Head.vue';
import Notice from '@/components/Notice.vue';

@Component({
  components: {
    Head,
    Notice,
  },
})
export default class Order extends Sence {
  public list: any = []; //预约列表
  public page: number = 1; //当前页数
  public pagesize: number = 6; //每页记录数
  public events: any = '';
  public type: any = 1;
  public title: string = '正在为您安排销售顾问'; // 提示信息
  public options: object = {
    pullUpLoad: true,
  }; //上拉加载
  public mounted(): void {
    if (this.$route.query.sell) {
      this.myDealerOrder();
      this.events = 'myDealerOrder';
      this.type = 2;
      this.title = '平台客服正在对接买家与您联系';
    } else {
      this.myDatement();
      this.events = 'myDatement';
      this.type = 1;
      this.title = '正在为您安排销售顾问';
    }
  }

  //查看咨询详情
  public toconsult(id: number): void {
    this.$router.push(`/orderdetail?id=${id}&type=${this.type}`);
  }

  //获取卖车预约列表
  public myDatement(): void {
    this.post('api/v1/myDatement', {
      page: this.page,
      page_size: this.pagesize,
    }).then((res: any) => {
      this.list = [...this.list, ...res.data.list];
      this.page += 1;
      if (res.data.list.length < this.pagesize) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  //获取卖车预约列表
  public myDealerOrder(): void {
    this.post('api/v1/myDealerOrder', {
      page: this.page,
      page_size: this.pagesize,
    }).then((res: any) => {
      this.list = [...this.list, ...res.data.list];
      this.page += 1;
      if (res.data.list.length < this.pagesize) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  /**
   * 前往信誉管理
   */
  public toRespect(id: number): void {
    this.$router.push(`/respect?id=${id}`);
  }
}
</script>

<style scoped lang="stylus">
.Order
    background #efeff4
    min-height 100vh

.scroll-body
    height calc(100vh - 45px - 50px)

.appointment-list {
    display: flex;
    flex-direction: column;
    padding: 0 5vw;
    background: white;
    margin-bottom: 10px;
}

.list-head {
    display: flex;
    flex-direction: row;
    padding: 5vw 0;
    border-bottom: 1px solid #dedede;
}

.head-left,
.head-left img {
    width: 100px;
    height: 75px;
}

.head-right {
    width: calc(100vw - 13vw - 100px);
    display: flex;
    flex-direction: column;
    align-items flex-start
    margin-left: 3vw;
    justify-content: space-around;
}

.head-title1 {
    font-size: 16px;
    text-align left;
    line-height 20px;
}

.head-title2 {
    font-size: 16px;
}

.head-title3 {
    color: gray;
    font-size: 16px;
}

.list-bottom {
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.bottom-left {
    display: flex;
    flex-direction: row;
}

.left-pic,
.left-pic img {
    width: 40px;
    height: 40px;
    border-radius: 40px;
}

.left-content {
    height 40px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.left-content > div:nth-child(2) {
    color: gray;
    font-size: 12px;
}

.bottom-right {
    height: 30px;
    line-height: 30px;
    background: #ff6347;
    padding: 0 10px;
    border-radius: 30px;
    color: white;
    font-weight bold;
    font-size: 14px;
}

.list-bottom-load {
    padding: 10px 0;
    color: #ff6347;
    font-weight: bold;
    text-align left
}

.bottomtitle {
    margin: 10px 0;
    text-align: center;
    color: gray;
}
</style>
